<template>
  <el-container>
    <el-main class="content-main">
      <el-table
        :data="tableData"
        size="small"
        v-loading="paginations.loading"
        element-loading-text="正在加载中..."
        highlight-current-row
        stripe
        style="width: 100%; margin-bottom: 10px"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column
          prop="module"
          label="模块"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="100"
        ></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column
          prop="addtime"
          label="记录时间"
          width="200"
        ></el-table-column>
      </el-table>
      <el-pagination
        v-if="paginations.total > 0"
        :page-size="paginations.pageSize"
        :layout="paginations.layout"
        :total="paginations.total"
        :current-page="paginations.pageIndex"
        @current-change="jump"
        style="text-align: right"
      >
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "log",
  data: function () {
    return {
      paginations: {
        loading: true,
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      tableData: [],
    };
  },
  methods: {
    init() {
      this.jump(1);
    },
    jump(i) {
      this.paginations.loading = true;
      this.paginations.pageIndex = i;
      this.$store.dispatch("ajaxSetting", {
        //   this.$store.dispatch("ajax", {
        url: "/api/queryLog",
        method: "get",
        data: { page: i, number: this.paginations.pageSize },
        succeed: (res) => {
          this.paginations.loading = false;
          this.tableData = res.rows;
          this.paginations.total = res.total;
        },
      });
    },
  },
  mounted: function () {
    this.init();
  },
};
</script>
